<template>
  <div class="mpd-workspace flex-size-auto display-flex">
    <template v-if="setting.isPreviewMode">
      <scroll-container>
        <page-preview-dom :mConfig="mpdPageConfig"></page-preview-dom>
      </scroll-container>
    </template>
    <template v-else>
      <side-bar
        direction="left"
        :selectedItem.sync="leftSideData.selectedItem"
        :itemActions="leftSideData.actions"
      ></side-bar>
      <page-canvas></page-canvas>
      <side-bar
        v-if="selectPageNodeDom.item.id"
        direction="right"
        :selectedItem.sync="rightSideData.selectedItem"
        :itemActions="rightSideActions"
      ></side-bar>
    </template>
  </div>
</template>

<script>
import SideBar from './SideBar.vue'
import PageCanvas from './page-canvas'
import setting from '@/store/setting'
import PagePreviewDom from './page-preview/PagePreviewDom.vue'
import library from '@/library'

export default {
  components: {
    SideBar,
    PageCanvas,
    PagePreviewDom
  },
  inject: ['mpdPageConfig', 'selectPageNodeDom', 'mpdPageValue'],
  data() {
    return {
      // 左侧栏操作按钮
      leftSideData: {
        // 选中的item
        selectedItem: 'top_PanelStructure',
        actions: {
          top: [
            {
              key: 'top_PanelStructure',
              icon: 'mpd-icon-structure',
              title: '结构',
              component: 'PanelStructure',
              selectItemKey: 'item'
            },
            {
              key: 'top_PanelComponentLibrary',
              icon: 'mpd-icon-component',
              title: '组件库',
              component: 'PanelComponentLibrary',
              selectItemKey: 'item'
            },
            {
              key: 'top_PanelPageJson',
              icon: 'mpd-icon-json',
              title: 'Page',
              component: 'PanelJsonShow',
              selectItemKey: 'item',
              attr: {
                json: this.mpdPageConfig
              }
            },
            {
              key: 'top_PanelValueJson',
              icon: 'mpd-icon-json',
              title: 'Value',
              component: 'PanelJsonShow',
              selectItemKey: 'item',
              attr: {
                json: this.mpdPageValue
              }
            }
          ],
          bottom: []
        }
      },
      // 右侧栏操作按钮
      rightSideData: {
        // 选中的item
        selectedItem: 'top_PanelBaseConfig'
      },
      setting: setting
    }
  },
  computed: {
    // 右侧栏操作按钮
    rightSideActions() {
      const data = {
        top: [],
        bottom: []
      }
      if (this.selectPageNodeDom.item.id) {
        const config = this.getComponentConfig(this.selectPageNodeDom.item)
        data.top.push({
          key: 'top_PanelBaseConfig',
          icon: 'mpd-icon-base-config',
          title: '基础项',
          component: 'PanelBaseConfig',
          selectItemKey: 'item',
          ...config
        })
        if (config.extra.length > 0) {
          const foundDataTmp = library.getLibraryDataMap(this.selectPageNodeDom.item.mpdConfig.component)
          data.top.push({
            key: 'top_PanelDynamicConfig',
            icon: foundDataTmp.ext.icon,
            title: foundDataTmp.title,
            component: 'PanelDynamicConfig',
            selectItemKey: 'item',
            ...config
          })
        }
      }
      if (this.selectPageNodeDom.slotItem.id) {
        let flag = true
        if (this.selectPageNodeDom.item.mpdConfig.slot && this.selectPageNodeDom.item.mpdConfig.slot.length > 0) {
          flag = !this.selectPageNodeDom.item.mpdConfig.slot.some(
            (item) => item.id === this.selectPageNodeDom.slotItem.id
          )
        }
        if (flag) {
          const config = this.getComponentConfig(this.selectPageNodeDom.slotItem)
          data.bottom.push({
            key: 'bottom_PanelBaseConfig',
            icon: 'mpd-icon-base-config',
            title: '基础项',
            component: 'PanelBaseConfig',
            selectItemKey: 'slotItem',
            ...config
          })
          if (config.extra.length > 0) {
            const foundDataTmp = library.getLibraryDataMap(this.selectPageNodeDom.slotItem.mpdConfig.component)
            data.bottom.push({
              key: 'bottom_PanelDynamicConfig',
              icon: foundDataTmp.ext.icon,
              title: foundDataTmp.title,
              component: 'PanelDynamicConfig',
              selectItemKey: 'slotItem',
              ...config
            })
          }
        }
      }
      return data
    }
  },
  methods: {
    // 获得需要的组件配置信息
    getComponentConfig(item) {
      const foundData = this.getLibConfig(item)
      const config = {
        base: {
          general: [],
          tabs: []
        },
        extra: []
      }
      if (foundData.ext.componentConfig) {
        const componentConfigMap = {}
        foundData.ext.componentConfig.forEach((element) => {
          let mapKey
          if (['event', 'model'].includes(element.type)) {
            mapKey = element.type
          } else {
            mapKey = element.group || ''
          }
          componentConfigMap[mapKey] = componentConfigMap[mapKey] || []
          componentConfigMap[mapKey].push(element)
        })
        for (const key in componentConfigMap) {
          switch (key) {
            case 'general':
              config.base.general = componentConfigMap[key]
              break
            case 'model':
            case 'event':
              config.base.tabs.push({ name: key, children: componentConfigMap[key] })
              break
            default:
              // 组件配置
              if (key) {
                config.extra.push({ name: key, children: componentConfigMap[key] })
              } else {
                config.extra.unshift({ name: '默认', children: componentConfigMap[key] })
              }
              break
          }
        }
      }
      return config
    },
    // 获得item的组件库配置
    getLibConfig(item) {
      if (item.mpdConfig) {
        const foundData = library.getLibraryDataMap(item.mpdConfig.component)
        // 初始化默认值
        foundData.ext.componentConfig = foundData.ext.componentConfig || []
        foundData.ext.componentConfig.forEach((element) => {
          element.inputList = element.inputList || []
          if (
            element.inputList.length === 0 ||
            element.inputList[element.inputList.length - 1].component !== 'a-textarea'
          ) {
            element.inputList.push({
              title: 'Textarea',
              component: 'a-textarea'
            })
          }
          const key = `${element.type}.${element.name}`
          if (!item.mpdConfig.configTmp[key]) {
            let value = 'a-textarea'
            if (element.inputList && element.inputList.length > 0) {
              value = element.inputList[0].component
            }
            this.$set(item.mpdConfig.configTmp, key, value)
          }
        })
        return foundData
      }
      return { ext: {} }
    }
  }
}
</script>

<style lang="less">
.mpd-workspace {
  background: var(--mpd-content-side-workspace-bg-color);
}
</style>
